<div class="page-background">
  <div class="login-content">
    <h1>用户注册</h1>
    <div class="form-content">
      <form nz-form [formGroup]="registerForm" (ngSubmit)="submitForm()">
        <nz-form-item>
          <nz-form-label [nzSpan]="6" nzRequired>用户名</nz-form-label>
          <nz-form-control [nzSpan]="18" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="userErrorTpl">
            <input nz-input formControlName="userName" placeholder="用户名" />
            <ng-template #userErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                Please input your username!
              </ng-container>
              <ng-container *ngIf="control.hasError('duplicated')">
                The username is redundant!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
        <!-- <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>E-mail</nz-form-label>
          <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="emailErrorTpl">
            <input nz-input formControlName="email" placeholder="email" type="email" />
            <ng-template #emailErrorTpl let-control>
              <ng-container *ngIf="control.hasError('email')">
                The input is not valid E-mail!
              </ng-container>
              <ng-container *ngIf="control.hasError('required')">
                Please input your E-mail!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item> -->
        <nz-form-item>
          <nz-form-label [nzSpan]="6" nzRequired>密码</nz-form-label>
          <nz-form-control [nzSpan]="18" nzHasFeedback nzErrorTip="Please input your password!">
            <input nz-input type="password" formControlName="password" (ngModelChange)="validateConfirmPassword()" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="6" nzRequired>密码确认</nz-form-label>
          <nz-form-control [nzSpan]="18" nzHasFeedback [nzErrorTip]="passwordErrorTpl">
            <input nz-input type="password" formControlName="confirm" placeholder="确认密码" />
            <ng-template #passwordErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                Please confirm your password!
              </ng-container>
              <ng-container *ngIf="control.hasError('confirm')">
                Password is inconsistent!
              </ng-container>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
        <!-- <nz-form-item>
          <nz-form-label [nzSpan]="7" nzRequired>Comment</nz-form-label>
          <nz-form-control [nzSpan]="12" nzErrorTip="Please write something here!">
            <textarea formControlName="comment" nz-input rows="2" placeholder="write any thing"></textarea>
          </nz-form-control>
        </nz-form-item> -->
        <nz-form-item>
          <nz-form-control [nzOffset]="7" [nzSpan]="17">
            <button nz-button nzType="primary" [disabled]="!registerForm.valid">Submit</button>
            <button nz-button (click)="resetForm($event)">Reset</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>
  </div>
</div>
